<!DOCTYPE html>
<html>
    <head>
        <title>Market</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            *{margin: 0;padding: 0;}
            body, td { font-size:12px;}
            table {
                *border-collapse: collapse; /* IE7 and lower */
                border-spacing: 0;
                width: 100%;
            }
            /*========bordered table========*/
            .bordered {
                border: solid #ccc 1px;
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                border-radius: 6px;
                -webkit-box-shadow: 0 1px 1px #ccc;
                -moz-box-shadow: 0 1px 1px #ccc;
                box-shadow: 0 1px 1px #ccc;
            }

            .bordered tr {
                -o-transition: all 0.1s ease-in-out;
                -webkit-transition: all 0.1s ease-in-out;
                -moz-transition: all 0.1s ease-in-out;
                -ms-transition: all 0.1s ease-in-out;
                transition: all 0.1s ease-in-out;		
            }
            .bordered .highlight,
            .bordered tr:hover {
                background: #fbf8e9;		
            }
            .bordered td, 
            .bordered th {
                border-left: 1px solid #ccc;
                border-top: 1px solid #ccc;
                padding: 10px;
                text-align: left;
            }
            .bordered th {
                background-color: #dce9f9;
                background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
                background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
                background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
                background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
                background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
                background-image: linear-gradient(top, #ebf3fc, #dce9f9);
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ebf3fc, endColorstr=#dce9f9);
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ebf3fc, endColorstr=#dce9f9)";
                -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
                -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
                box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
                border-top: none;
                text-shadow: 0 1px 0 rgba(255,255,255,.5);
            }
            .bordered td:first-child, 
            .bordered th:first-child {
                border-left: none;
            }
            .bordered th:first-child {
                -moz-border-radius: 6px 0 0 0;
                -webkit-border-radius: 6px 0 0 0;
                border-radius: 6px 0 0 0;
            }
            .bordered th:last-child {
                -moz-border-radius: 0 6px 0 0;
                -webkit-border-radius: 0 6px 0 0;
                border-radius: 0 6px 0 0;
            }
            .bordered tr:last-child td:first-child {
                -moz-border-radius: 0 0 0 6px;
                -webkit-border-radius: 0 0 0 6px;
                border-radius: 0 0 0 6px;
            }
            .bordered tr:last-child td:last-child {
                -moz-border-radius: 0 0 6px 0;
                -webkit-border-radius: 0 0 6px 0;
                border-radius: 0 0 6px 0;
            }
            /*----------------------*/
            .zebra td, 
            .zebra th {
                padding: 10px;
                border-bottom: 1px solid #f2f2f2;
            }
            .zebra .alternate,
            .zebra tbody tr:nth-child(even) {
                background: #f5f5f5;
                -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
                -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
                box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
            }
            .zebra th {
                text-align: left;
                text-shadow: 0 1px 0 rgba(255,255,255,.5);
                border-bottom: 1px solid #ccc;
                background-color: #eee;
                background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));
                background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
                background-image: -moz-linear-gradient(top, #f5f5f5, #eee);
                background-image: -ms-linear-gradient(top, #f5f5f5, #eee);
                background-image: -o-linear-gradient(top, #f5f5f5, #eee);
                background-image: linear-gradient(top, #f5f5f5, #eee);
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f5f5f5, endColorstr=#eeeeee);
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#f5f5f5, endColorstr=#eeeeee)";
            }
            .zebra th:first-child {
                -moz-border-radius: 6px 0 0 0;
                -webkit-border-radius: 6px 0 0 0;
                border-radius: 6px 0 0 0;
            }
            .zebra th:last-child {
                -moz-border-radius: 0 6px 0 0;
                -webkit-border-radius: 0 6px 0 0;
                border-radius: 0 6px 0 0;
            }
            .zebra tfoot td {
                border-bottom: 0;
                border-top: 1px solid #fff;
                background-color: #f1f1f1;
            }
            .zebra tfoot td:first-child {
                -moz-border-radius: 0 0 0 6px;
                -webkit-border-radius: 0 0 0 6px;
                border-radius: 0 0 0 6px;
            }
            .zebra tfoot td:last-child {
                -moz-border-radius: 0 0 6px 0;
                -webkit-border-radius: 0 0 6px 0;
                border-radius: 0 0 6px 0;
            }.button{
                display: inline-block;
                *display: inline;
                zoom: 1;
                padding: 6px 20px;
                margin: 0;
                cursor: pointer;
                border: 1px solid #bbb;
                overflow: visible;
                font: bold 13px arial, helvetica, sans-serif;
                text-decoration: none;
                white-space: nowrap;
                color: #555;
                background-color: #ddd;
                background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); 
                transition: background-color .2s ease-out;
                background-clip: padding-box; /* Fix bleeding */
                border-radius: 3px;
                box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
                    px 2px -1px rgba(0, 0, 0, .5),
                    px 0 rgba(255, 255, 255, .3) inset;
                text-shadow: 0 1px 0 rgba(255,255,255, .9);  
            }

            .button:hover{
                background-color: #eee;
                color: #555;
            }

            .button:active{
                background: #e9e9e9;
                position: relative;
                top: 1px;
                text-shadow: none;
                box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
            }
            .button.green{
                background-color: #57a957;
                border-color: #57a957;
            }

            .button.green:hover{
                background-color: #62c462;
            }

            .button.green:active{
                background: #57a957;
            }

            /* */

            .button.red{
                background-color: #c43c35;
                border-color: #c43c35;
            }

            .button.red:hover{
                background-color: #ee5f5b;
            }

            .button.red:active{
                background: #c43c35;
            }

            /* */

            .button.blue{
                background-color: #269CE9;
                border-color: #269CE9;
            }

            .button.blue:hover{
                background-color: #70B9E8;
            }

            .button.blue:active{
                background: #269CE9;
            }
        </style>
    </head>
    <body>
        <div>{$content}</div>
    </body>
</html>
